<template>
  <div class="home-page">
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">
          <vue-icon class="hero-icon" />
          欢迎来到 Vue3 微前端
        </h1>
        <p class="hero-description">
          这是一个基于Vue 3 + Vite + 乾坤构建的微前端子应用示例
        </p>
        <div class="hero-stats">
          <div class="stat-item">
            <div class="stat-value">{{ appInfo.version }}</div>
            <div class="stat-label">应用版本</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ appInfo.framework }}</div>
            <div class="stat-label">框架</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ appInfo.buildTool }}</div>
            <div class="stat-label">构建工具</div>
          </div>
        </div>
      </div>
    </div>

    <div class="features-section">
      <h2 class="section-title">主要特性</h2>
      <div class="features-grid">
        <div class="feature-card" v-for="feature in features" :key="feature.id">
          <div class="feature-icon">
            <component :is="feature.icon" />
          </div>
          <h3 class="feature-title">{{ feature.title }}</h3>
          <p class="feature-description">{{ feature.description }}</p>
        </div>
      </div>
    </div>

    <div class="tech-stack-section">
      <h2 class="section-title">技术栈</h2>
      <div class="tech-grid">
        <a-tag 
          v-for="tech in techStack" 
          :key="tech.name"
          :color="tech.color"
          class="tech-tag"
        >
          {{ tech.name }} {{ tech.version }}
        </a-tag>
      </div>
    </div>

    <div class="status-section">
      <a-card title="应用状态" class="status-card">
        <div class="status-grid">
          <div class="status-item">
            <span class="status-label">运行状态:</span>
            <a-tag color="green">正常运行</a-tag>
          </div>
          <div class="status-item">
            <span class="status-label">挂载时间:</span>
            <span>{{ mountTime }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">是否微前端:</span>
            <a-tag :color="isMicroFrontend ? 'blue' : 'orange'">
              {{ isMicroFrontend ? '是' : '否' }}
            </a-tag>
          </div>
          <div class="status-item">
            <span class="status-label">父应用通信:</span>
            <a-tag :color="hasParentProps ? 'green' : 'gray'">
              {{ hasParentProps ? '已连接' : '未连接' }}
            </a-tag>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  RocketOutlined, 
  SafetyOutlined, 
  ThunderboltOutlined, 
  BugOutlined,
  ApiOutlined,
  DesktopOutlined
} from '@ant-design/icons-vue'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

// Vue图标组件
const VueIcon = {
  template: `
    <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2,3L5,3L12,15L19,3L22,3L12,21L2,3Z" fill="#41b883"/>
    </svg>
  `
}

// 应用信息
const appInfo = ref({
  version: 'v1.0.0',
  framework: 'Vue 3',
  buildTool: 'Vite'
})

// 特性列表
const features = ref([
  {
    id: 1,
    icon: RocketOutlined,
    title: '快速启动',
    description: '基于Vite构建，支持热重载和快速开发'
  },
  {
    id: 2,
    icon: SafetyOutlined,
    title: '沙箱隔离',
    description: '通过乾坤框架实现样式和JS沙箱隔离'
  },
  {
    id: 3,
    icon: ThunderboltOutlined,
    title: '高性能',
    description: 'Vue 3 Composition API + 响应式系统'
  },
  {
    id: 4,
    icon: BugOutlined,
    title: '类型安全',
    description: '支持TypeScript开发和类型检查'
  },
  {
    id: 5,
    icon: ApiOutlined,
    title: '通信机制',
    description: '支持与主应用的双向通信'
  },
  {
    id: 6,
    icon: DesktopOutlined,
    title: '响应式',
    description: '适配各种屏幕尺寸和设备'
  }
])

// 技术栈
const techStack = ref([
  { name: 'Vue', version: '3.4.0', color: 'green' },
  { name: 'Vite', version: '5.0.0', color: 'blue' },
  { name: 'Vue Router', version: '4.2.5', color: 'cyan' },
  { name: 'Pinia', version: '2.1.7', color: 'orange' },
  { name: 'Ant Design Vue', version: '4.0.0', color: 'purple' },
  { name: 'Qiankun', version: '2.10.16', color: 'geekblue' }
])

// 状态信息
const mountTime = ref('')
const isMicroFrontend = ref(false)
const hasParentProps = ref(false)

onMounted(() => {
  // 设置挂载时间
  mountTime.value = new Date().toLocaleString()
  
  // 检查是否在微前端环境中
  isMicroFrontend.value = !!qiankunWindow.__POWERED_BY_QIANKUN__
  
  // 检查父应用props（这里可以根据实际传入的props来判断）
  hasParentProps.value = !!window.__QIANKUN_PROPS__
  
  console.log('🏠 Vue3首页组件已挂载', {
    isMicroFrontend: isMicroFrontend.value,
    hasParentProps: hasParentProps.value
  })
})
</script>

<style scoped>
.home-page {
  padding: 24px;
}

.hero-section {
  text-align: center;
  padding: 60px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  margin-bottom: 40px;
  color: white;
}

.hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 48px;
  margin-bottom: 16px;
  font-weight: 700;
}

.hero-icon {
  font-size: 48px;
}

.hero-description {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

.section-title {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
}

.features-section {
  margin-bottom: 60px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.feature-card {
  background: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 48px;
  color: #667eea;
  margin-bottom: 16px;
}

.feature-title {
  font-size: 20px;
  margin-bottom: 12px;
  color: #2c3e50;
}

.feature-description {
  color: #666;
  line-height: 1.6;
}

.tech-stack-section {
  margin-bottom: 60px;
}

.tech-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.tech-tag {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 20px;
}

.status-section {
  margin-bottom: 40px;
}

.status-card {
  max-width: 600px;
  margin: 0 auto;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-label {
  font-weight: 500;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 32px;
    flex-direction: column;
    gap: 8px;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 20px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
  }
}
</style>